<template>
	<view class="actives">
		<view class="uni-form-item uni-column">
			<input class="uni-input" type="number" v-model="form.mobile" disabled placeholder="请输入手机号"
				placeholder-style="color:#858585;font-size:28rpx" />
		</view>
		<view class="uni-form-item uni-column">
			<input class="uni-input" type="number" v-model="form.code" placeholder="请输入验证码"
				placeholder-style="color:#858585;font-size:28rpx" />
			<text class="red_text" @click="countDown">{{content}}</text>
		</view>
		<button type="default" class="active_btn" :class="{disabled : !form.mobile || !form.code}"
			:disabled="!form.mobile || !form.code" @click="goResetPwd">确认</button>
	</view>
</template>

<script>
	import {
		addresslist
	} from '@/api/my/address.js';
	import {
		mapState,
	} from 'vuex';
	export default {
		data() {
			return {
				content: '发送验证码',
				totalTime: 60,
				canClick: true, //添加canClick
				form: {
					mobile: "",
					code: ""
				},
			}
		},
		created() {
			if (this.userinfo.pay_password) {
				wx.setNavigationBarTitle({
					title: '修改密码'
				})
			}
		},
		computed: {
			...mapState(['userinfo'])
		},
		onLoad() {
			this.form.mobile = this.userinfo.mobile;
		},
		methods: {
			countDown() {
				if (!this.canClick) return
				this.doCertify();
			},
			goResetPwd() {
				let reg = /^1(3[0-9]|4[5,7]|5[0,1,2,3,5,6,7,8,9]|6[2,5,6,7]|7[0,1,7,8,6]|8[0-9]|9[1,8,9])\d{8}$/;
				if (!reg.test(this.form.mobile) || !this.form.mobile.length == 11) {
					this.showToast('手机号格式错误');
					return;
				}
				this.checkCode();
			},
			// 验证验证码
			checkCode() {
				addresslist('checkSMS', {
					mobile: this.form.mobile,
					verification_code: this.form.code
				}).then(res => {
					if (res.code == 200) {
						uni.navigateTo({
							url: `/pagesA/my/userinfo/resetPwd?mobile=${this.form.mobile}`
						})
					} else {
						this.content = '获取验证码';
						this.totalTime = 60;
						this.canClick = true; //这里重新开启
					}
				}).catch(error => {})
			},
			showToast(text) {
				uni.showToast({
					title: text,
					icon: 'none',
				});
			},

			doCertify() {
				let reg = /^1(3[0-9]|4[5,7]|5[0,1,2,3,5,6,7,8,9]|6[2,5,6,7]|7[0,1,7,8,6]|8[0-9]|9[1,8,9])\d{8}$/;
				if (!reg.test(this.form.mobile) || !this.form.mobile.length == 11) {
					this.showToast('手机号格式错误');
					return;
				} else {
					uni.showLoading({
						title: `验证码发送中`
					});
					addresslist('sendSMS', {
						mobile: this.form.mobile,
						type: "1"
					}).then(res => {
						uni.hideLoading();
						if (res.code == 200) {
							this.canClick = false
							this.content = this.totalTime + 's'
							let clock = setInterval(() => {
								this.totalTime--
								this.content = this.totalTime + 's';
								if (this.totalTime <= 0) {
									clearInterval(clock);
									this.content = '获取验证码';
									this.totalTime = 60;
									this.canClick = true; //这里重新开启
								}
							}, 1000);
						}
					}).catch(error => {
						uni.hideLoading();
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "../my.scss";

	.actives {
		padding: 0 20rpx;
		color: #383838;
		font-size: 28rpx;

		.uni-form-item {
			position: relative;
			line-height: 100rpx;
			@include flexLayout(center, flex-start);
			border-bottom: 2rpx solid #eff2f5;
			padding-top: 10rpx;
		}

		.uni-input {
			width: 75%;
			height: 100rpx;
			line-height: 100rpx;
		}

		.active_btn {
			width: 80%;
			height: 84rpx;
			line-height: 84rpx;
			background: linear-gradient(360deg, #EE4629 0%, #EE653A 100%);
			box-shadow: 0px 20rpx 36rpx 0px rgba(238, 73, 43, 0.25);
			border-radius: 42rpx;
			margin: 160rpx 10%;
			color: #FFFFFF;
			font-size: 36rpx;
			font-weight: 500;
		}

		.active_btn:after {
			border-color: transparent;
		}

		.red_text {
			position: absolute;
			right: 0;
			color: #F54642;
		}

		.disabled {
			background: #c3b4b4;
		}
	}
</style>
